<template>
	<view class="main">
		<!-- 流出申报 -->
		<view class="card" v-if="type==1">
			<view class="input-item flex align">
				<view>姓名</view>
				<input placeholder="输入姓名" v-model="realname" />
			</view>
			<view class="input-item flex align">
				<view>身份证号</view>
				<input placeholder="输入身份证号" v-model="id_card" />
			</view>
			<view class="input-item flex align">
				<view>电话号码</view>
				<input placeholder="输入电话号码" v-model="mobile" />
			</view>
			<view class="input-item flex align" @click="toShow()">
				<view>性别</view>
				<view :style="sex==''?'color:grey':''">{{sex==''?'点击选择':sexText}}</view>
			</view>
			<view class="input-item flex align">
				<view>流出党支部</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker :clear-icon="false" :localdata="items_out_org" popup-title="请选择流出党支部"
						@change="onchangeOutOrg"></uni-data-picker>
				</view>
			</view>

			<view class="input-item flex align between">
				<view>流入地</view>
				<view class="address" style="width: 360rpx;">
					<uni-data-picker v-model="district_id" :clear-icon="false" :localdata="in_items"
						popup-title="请选择流入地" @change="onchange3"></uni-data-picker>
				</view>
				<view class="getAdd" @click="myLocation()">获取位置</view>
			</view>
			<view class="input-item flex align">
				<view>详细地址</view>
				<input placeholder="乡镇-村（社区） 街道" v-model="in_address" />
			</view>
			<!-- 	<view v-if="geoAddress.length!=0" style="font-size: 28rpx;color: gray;padding: 20rpx 0;">（{{geoAddress}}）
			</view> -->
			<view class="input-item flex align">
				<view>流入党支部</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker v-model="in_organization_val" :custom="true" :clear-icon="false"
						:localdata="items_in_org" popup-title="请选择流入党支部" @change="onchangeInOrg">
						<!-- 自定义文本框，带图标 -->
						<template>
							<view class="inputBor flex align between">
								<input v-model="in_organization_val_text" placeholder="请选择" readonly disabled />
								<uni-icons type="down" color="#999" size="16"></uni-icons>

							</view>
						</template>
					</uni-data-picker>
				</view>
			</view>
			<view class="input-item flex align" v-if="in_organization_val_text=='其他'">
				<view>其他党支部</view>
				<input placeholder="输入具体党支部或者无" v-model="inorgname" />
			</view>
			<view class="input-item flex align">
				<view>从事行业</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker v-model="job_id" :clear-icon="false" :localdata="jobList" popup-title="请选择从事行业"
						@change="onchange4"></uni-data-picker>
				</view>
			</view>
			<view class="input-item flex align">
				<view>备注</view>
				<input placeholder="输入备注" v-model="remark" />
			</view>
		</view>
		<!-- 流入申报 -->
		<view class="card" v-if="type==2">
			<view class="input-item flex align">
				<view>姓名</view>
				<input placeholder="输入姓名" v-model="realname" />
			</view>
			<view class="input-item flex align">
				<view>身份证号</view>
				<input placeholder="输入身份证号" v-model="id_card" />
			</view>
			<view class="input-item flex align">
				<view>电话号码</view>
				<input placeholder="输入电话号码" v-model="mobile" />
			</view>
			<view class="input-item flex align" @click="toShow()">
				<view>性别</view>
				<view :style="sex==''?'color:grey':''">{{sex==''?'点击选择':sexText}}</view>
			</view>
			<view class="input-item flex align">
				<view>流出地</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker :clear-icon="false" :localdata="out_items" popup-title="请选择流出地"
						@change="onchange2"></uni-data-picker>
				</view>
			</view>
			<view class="input-item flex align">
				<view>流出党支部</view>
				<input placeholder="输入流出党支部" v-model="outorgname" />
			</view>
			<!-- 			<view class="input-item flex align">
				<view>流出党支部</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker v-model="out_organization_val" :clear-icon="false" :localdata="items_out_org"
						popup-title="请选择流出党支部" @change="onchangeOutOrg"></uni-data-picker>
				</view>
			</view> -->
			<view class="input-item flex align">
				<view>流入党支部</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker :clear-icon="false" :localdata="items_in_org" popup-title="请选择流入党支部"
						@change="onchangeInOrg"></uni-data-picker>
				</view>
			</view>
			<view class="input-item flex align">
				<view>从事行业</view>
				<view class="address" style="width: 500rpx;">
					<uni-data-picker v-model="job_id" :clear-icon="false" :localdata="jobList" popup-title="请选择从事行业"
						@change="onchange4"></uni-data-picker>
				</view>
			</view>
			<view class="input-item flex align">
				<view>备注</view>
				<input placeholder="输入备注" v-model="remark" />
			</view>
		</view>

		<!-- 性别 -->
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
		<view class="resign-btn" @click="toSubmit()">提交</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import {
		organizationList,
		regionLists,
		applyAdd,
		userDetail,
		regionOrganizationLists,
		regionOrganizationOutlists,
		regionOrganizationInlists,
		organizationNewList,
		industryLists
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				realname: '',
				mobile: '',
				address: '',
				in_organization: [],
				out_organization: [],
				items: [],
				out_items: [],
				in_items: [],
				out_region: [],
				in_region: [],
				job: '',
				type: 1,
				sex: '',
				show: false,
				columns: [
					['男', '女']
				],
				sexText: '',
				items_out_org: [],
				items_in_org: [],
				id_card: '',
				remark: '',
				in_organization_val: '',
				out_organization_val: '',
				geoAddress: [],
				district_id: '',
				in_organization_val_text: '',
				jobList: [],
				job_id: '',
				outorgname: '',
				in_address:'',
				inorgname:''
			};
		},
		onLoad(option) {
			this.type = option.type
			if (option.type == 2) {
				uni.setNavigationBarTitle({
					title: '流入申报'
				})
				this.out_organization_val = '774'
				this.out_organization = ['774']
			} else {
				uni.setNavigationBarTitle({
					title: '流出申报'
				})
				qqmapsdk = new QQMapWX({
					key: 'F2GBZ-2II6X-EQB4R-7MYZJ-K3S3E-KKBNB'
				});
			}

			this.getDetail()
			this.getOrganization()
			this.getRegion()
			this.getIndustry()
		},

		methods: {
			myLocation() { //F2GBZ-2II6X-EQB4R-7MYZJ-K3S3E-KKBNB 
				let _this = this
				uni.showLoading({
					title: "获取定位中...",
					mask: true
				})
				// console.log("开始获取权限")
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.getLocation({
							type: 'wgs84',
							success: function(resp) {
								uni.hideLoading();
								let latitude = resp.latitude;
								let longitude = resp.longitude;
								qqmapsdk.reverseGeocoder({
									location: {
										latitude: latitude,
										longitude: longitude
									},
									success: function(resp) {
										console.log(resp.result)
										let address = resp.result.address
										let addressComponent = resp.result
											.address_component
										let nation = addressComponent.nation;
										let province = addressComponent.province;
										let city = addressComponent.city;
										let district = addressComponent.district;
										console.log("address:" + address +
											"addressComponent:" + addressComponent +
											"nation:" + nation +
											"province:" + province +
											"city:" + city +
											"district:" + district)
										_this.geoAddress = [province, city, district]
										let items = _this.in_items
										items.forEach(item => {
											if (item.name == province) {
												item.children.forEach(item2 => {
													if (item2.name ==
														city) {
														item2.children
															.forEach(
																item3 => {
																	if (item3
																		.name ==
																		district
																	) {
																		_this
																			.district_id =
																			item3
																			.id
																		_this
																			.in_region = [
																				item
																				.id,
																				item2
																				.id,
																				item3
																				.id
																			]
																		_this
																			.getDang()
																	}
																})
													}
												})
											}
										})
										// self.addrlocal = city + district; // 使用保存的self
										// console.log(self.addrlocal);
										/**
										 * address:吉林省长春市南关区东岭南街3355号addressComponent:[object Object]nation:中国province:吉林省city:长春市district:南关区
										 */
									}
								})
							},
							fail(err) {
								uni.hideLoading();
								uni.showToast({
									title: '获取位置失败！',
									icon: 'error'
								})
							}
						})
					},
					fail(err) {
						console.log(err)
						uni.hideLoading();
						// 用户拒绝授权，或者未开启定位服务，引导用户去设置中开启
						uni.showModal({
							title: '授权失败',
							content: '需要获取您的地理位置授权，请到设置中开启',
							showCancel: false,
							confirmText: '去设置',
							success: function(res) {
								if (res.confirm) {
									// 打开设置页面
									uni.openSetting({
										success: (res) => {
											console.log('打开设置成功');
											_this.myLocation()
										}
									});
								}
							}
						});
					}
				})
			},
			confirm(e) {
				console.log('confirm', e)
				this.sexText = e.value[0]
				if (e.value[0] == '男') {
					this.sex = 1
				} else {
					this.sex = 2
				}
				this.show = false
			},
			toShow() {
				this.show = true
				console.log(666)
			},
			async getDetail() {
				const result = await userDetail()
				if (result.code == 1) {
					this.realname = result.data.realname
					this.mobile = result.data.mobile
					this.id_card = result.data.id_card
					this.sex = result.data.sex
					this.sexText = result.data.sex_text
					if (result.data.job != null) {
						this.job = result.data.job
					}
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			async getRegion() {
				const result = await regionLists()
				result.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					item.children.forEach(item2 => {
						item2.text = item2.name
						item2.value = item2.id
						if (item2.children.length > 0) {
							item2.children.forEach(item3 => {
								item3.text = item3.name
								item3.value = item3.id
							})
						}
					})
				})

				this.out_items = result.data
				this.in_items = result.data
				if (this.type == 1) {
					// this.getLoaction()
					this.myLocation()
				}
			},
			async getOrganization() {
				const result1 = await organizationNewList({
					parent_id: 738
				})
				result1.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					if (item.children) {
						item.children.forEach(item2 => {
							item2.text = item2.name
							item2.value = item2.id
							if (item2.children) {
								item2.children.forEach(item3 => {
									item3.text = item3.name
									item3.value = item3.id
								})
							}
						})
					}
				})
				const result2 = await organizationNewList({
					parent_id: 737
				})
				result2.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					if (item.children) {
						item.children.forEach(item2 => {
							item2.text = item2.name
							item2.value = item2.id
							if (item2.children) {
								item2.children.forEach(item3 => {
									item3.text = item3.name
									item3.value = item3.id
								})
							}
						})
					}
				})
				if (this.type == 1) {
					this.items_out_org = result1.data
					this.items_in_org = result2.data
				} else {
					this.items_out_org = result2.data
					this.items_in_org = result1.data
				}

			},
			async getIndustry() {
				const result = await industryLists()
				result.data.forEach(item => {
					item.text = item.name
					item.value = item.id
					if (item.children) {
						item.children.forEach(item2 => {
							item2.text = item2.name
							item2.value = item2.id
							if (item2.children) {
								item2.children.forEach(item3 => {
									item3.text = item3.name
									item3.value = item3.id
								})
							}
						})
					}
				})
				this.jobList = result.data
			},
			onchangeInOrg(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				let text = []
				value.forEach(item => {
					arr.push(item.value)
					text.push(item.text)
				})
				this.in_organization = arr
				this.in_organization_val_text = text[text.length - 1]
				console.log(this.in_organization_val_text)
			},
			onchangeOutOrg(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.out_organization = arr
			},
			onchange2(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.out_region = arr
				uni.hideLoading();
				if (this.type == 1) {
					this.getDang2()
				}
			},
			onchange3(e) {
				const value = e.detail.value
				console.log(value)
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.in_region = arr
				this.getDang()
			},
			onchange4(e) {
				const value = e.detail.value
				let arr = []
				value.forEach(item => {
					arr.push(item.value)
				})
				this.job_id = arr
				console.log(this.job_id)
			},
			async getDang() {
				const result = await regionOrganizationLists({
					region: this.in_region,
					root: 737
				})
				if (result.code == 1) {
					if (result.data.length > 0) {
						console.log(result.data[0])
						this.in_organization = result.data[0]
						let datas = result.data[0]
						if (datas.length == 1) {
							this.in_organization_val = datas[0]
						}
						if (datas.length == 2) {
							this.in_organization_val = datas[1]
						}
						if (datas.length == 3) {
							this.in_organization_val = datas[2]
						}
					} else {
						this.in_organization_val = ''
					}
					this.in_organization_val_text = ''
				}
				uni.hideLoading();

			},
			async getDang2() {
				const result = await regionOrganizationLists({
					region: this.out_region
				})
				if (result.code == 1) {
					uni.hideLoading();
					if (result.data.length > 0) {
						console.log(result.data[0])
						this.out_organization = result.data[0]
						let datas = result.data[0]
						if (datas.length == 1) {
							this.out_organization_val = datas[0]
						}
						if (datas.length == 2) {
							this.out_organization_val = datas[1]
						}
						if (datas.length == 3) {
							this.out_organization_val = datas[2]
						}
					}
				} else {
					uni.hideLoading();
				}

			},
			// 提交申报
			async toSubmit() {
				let obj = {
					realname: this.realname,
					id_card: this.id_card,
					mobile: this.mobile,
					sex: this.sex,
					in_region: this.in_region,
					in_organization: this.in_organization,
					industry: this.job_id,
					out_region: this.out_region,
					remark: this.remark,
					type: this.type,
					bjtype: 0
				}
				if (this.type == 2) {
					obj.outorgname = this.outorgname
				} else {
					obj.out_organization = this.out_organization
					obj.in_address = this.in_address
					obj.inorgname = this.inorgname
				}
				console.log(obj)
				if (obj.realname == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return false
				}
				if (obj.mobile == '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'error'
					})
					return false
				}
				const result = await applyAdd(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg,
					})
					uni.setStorageSync('confirm', false);
					uni.setStorageSync('confirm2', false);
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/apply/record'
						})
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 24rpx;
		padding-bottom: 100rpx;

		.card {
			border-radius: 12rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			padding: 30rpx 24rpx;
			background: white;
			margin-bottom: 30rpx;

			.loadUp {
				background: #D9D9D9;
				border-radius: 12rpx;
				width: fit-content;
				padding: 43rpx;
				margin-top: 20rpx;
			}

			.logo {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.card-tit {
				font-size: 32rpx;
				font-weight: bold;

				text {
					background: #FF6543;
					display: block;
					width: 5rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;

				view {
					width: 30%;
				}

				input {
					font-size: 28rpx;
					width: 70%;
				}

				.address {
					view {
						width: 100%;
					}

					.inputBor {
						padding: 10rpx;
						border: solid 1rpx #D9D9D9;
						border-radius: 10rpx;
						width: 95%;

						input {
							width: 90%;
						}
					}
				}



				.getAdd {
					background: #FF6543;
					color: white;
					text-align: center;
					padding: 10rpx 3rpx;
					border-radius: 10rpx;
					font-size: 24rpx;
					width: 130rpx;
					margin-left: 10rpx;
				}
			}
		}

		.resign-btn {
			background: #FF9008;
			border-radius: 32rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: white;
			padding: 17rpx 0;
			margin: 80rpx auto;
			text-align: center;
		}
	}
</style>